<template>
    <div style="height: 100vh">
        <el-scrollbar style="width: 100%;height: 100%;">
            <headerNav :title="title" :iccid="iccid" :openid="openid"></headerNav>
            <footerNav></footerNav>

          <van-cell-group>
            <van-cell title="本月通话时长(分钟)"  :value="this.use" />
            <van-notice-bar text="每张卡,一个自然月只可删除一个白名单配置号码,且删除之后,删除的白名单号码与改卡无法实现语音通信功能!!!!!"  value="每张卡,一个自然月只可删除一个白名单配置号码,且删除之后,删除的白名单号码与改卡无法实现语音通信功能!!" left-icon="volume" />
          </van-cell-group>
          <van-form > <!-- @submit="" -->
            <van-field
                center
                clearable
                v-model="this.whiteList[0].whiteNumber"
                label="白名单"
                placeholder="白名单手机号"
            >
              <van-button slot="button" type="danger"  plain v-if="this.whiteList[0].whiteNumber != ''"
              @click="delWhite(whiteList[0].whiteNumber)" style="text-decoration: underline red;">
                删除
              </van-button>

            </van-field>
            <van-field
                center
                clearable
                v-model="this.whiteList[1].whiteNumber"
                label="白名单"
                placeholder="白名单手机号"
            >
              <van-button slot="button" type="danger"  plain v-if="this.whiteList[1].whiteNumber != ''"
                          @click="delWhite(whiteList[1].whiteNumber)">
                删除
              </van-button>
            </van-field>
            <van-field
                center
                clearable
                v-model="this.whiteList[2].whiteNumber"
                label="白名单"
                placeholder="白名单手机号"
            >
              <van-button slot="button" type="danger"  plain v-if="this.whiteList[2].whiteNumber != ''"
                          @click="delWhite(whiteList[2].whiteNumber)">
                删除
              </van-button>
            </van-field>
            <van-field
                center
                clearable
                v-model="this.whiteList[3].whiteNumber"
                label="白名单"
                placeholder="白名单手机号"
            >
              <van-button slot="button" type="danger"  plain v-if="this.whiteList[3].whiteNumber != ''"
                          @click="delWhite(whiteList[3].whiteNumber)">
                删除
              </van-button>
            </van-field>
            <van-field
                center
                clearable
                v-model="this.whiteList[4].whiteNumber"
                label="白名单"
                placeholder="白名单手机号"
            >
              <van-button slot="button" type="danger"  plain v-if="this.whiteList[4].whiteNumber != ''"
                          @click="delWhite(whiteList[4].whiteNumber)" style="text-decoration: underline red;">
                删除
              </van-button>
            </van-field>
          </van-form>
          <div  style="text-align: center;justify-content:center;">
            <van-button block @click="openAdd()">添加白名单手机号</van-button>

          </div>

          <van-popup
              v-model="show"
              closeable
              position="bottom"
              :style="{ height: '80%' }"
          >
            <div style="margin-top: 40px">
              <van-cell-group>
                <van-field
                    center
                    clearable
                    v-model="addWhiteNumber"
                    label="新增白名单"
                    placeholder="新增白名单手机号"
                >
                  <van-button slot="button" type="primary" size="middle" plain @click="addWhite">
                    确定
                  </van-button>
                </van-field>
              </van-cell-group>

            </div>

          </van-popup>

          <div style="height: 3rem"></div>
        </el-scrollbar>
        <rightBottom></rightBottom>
    </div>

</template>

<script>
    import headerNav from "../../../components/headerNav";
    import footerNav from "../../../components/footerNav";
    import rightBottom from "../../../components/rightBottom";
    import tools from "@/utils/tools";
    import {Dialog, Notify} from "vant";
    /*import Vue from 'vue';
    import { Form } from 'vant';*/
    export default {
        name: "whitelist",
        components:{
            "headerNav":headerNav,
            "footerNav":footerNav,
            "rightBottom":rightBottom
        },
        data() {
            return {
                title:'修改密码',
                activeName: ['index'],
                iccid:'',
                openid:'',
                Ordpassword: '撒大声地',
                password: '',
                Newpassword:'',
                contents:{},
                use:'',
                whiteList:[
                  {whiteNumber:''},
                  {whiteNumber:''},
                  {whiteNumber:''},
                  {whiteNumber:''},
                  {whiteNumber:''}
                ],
                show0:false,
                show1:false,
                show2:false,
                show3:false,
                show4:false,
                show:false,
                addWhiteNumber:'',
              s_telephone1:'',
            };
        },
        mounted() {
            let _this=this;

            _this.iccid=_this.$route.params.iccid;

            if(_this.$check.checkIsNull(_this.iccid)){
                _this.iccid =_this.$store.state.iccid;
            }
            _this.openid=_this.$route.params.openid;
            if(_this.$check.checkIsNull(_this.openid)){
                _this.openid=_this.$store.state.openid;
            }
            _this.Ordpassword=_this.$route.params.Ordpassword;

            _this.appId =_this.$store.state.appid;
            //_this.$toast.fail(_this.iccid)

          _this.getWhiteList( _this.iccid);
        },
        methods:{
            getWhiteList(){ // 获取 语音数据
              let _this=this;
              let map = {};
            console.log(_this.iccid);
              map.iccid = _this.iccid;
              let Pwd_Str = tools.encrypt(JSON.stringify(map));
              _this.$ajax.post(process.env.VUE_APP_SERVER + "/web/weixin/pac/whitelist", Pwd_Str).then((res) => {
                let jsonobj = JSON.parse(tools.Decrypt(res.data));

                if (jsonobj.code == 200){
                  _this.use = jsonobj.Data.use;
                  _this.whiteList = jsonobj.Data&&jsonobj.Data.whiteMap || [];
                  console.log( _this.whiteList);
                }
              }).catch()
            },


          delWhite(number){
              console.log(number)
            Notify({ type: 'warning', message: '!!!白名单号码单卡每月仅限删除一张!!!' });
            let _this=this;
            Dialog.confirm({
              message: '您确定删除iccid为'+_this.iccid+"的语音卡白名单中号码为"+number+"的号码么?"
            })
                .then(() => {
                  // on confirm 确定键位
                  let map={};
                  map.iccid=_this.iccid;
                  map.delNumber=number;
                  let Pwd_Str = tools.encrypt(JSON.stringify(map));
                      _this.$ajax.post(process.env.VUE_APP_SERVER + "/web/weixin/pac/delWhite", Pwd_Str).then((res) => {
                        let jsonobj = JSON.parse(tools.Decrypt(res.data));
                        console.log(jsonobj)
                        if (jsonobj.Data.status ==  0){
                          Notify({ type: 'success', message: '删除成功' });
                        }else{
                          Notify({ type: 'danger', message: jsonobj.Data.message });
                        }
                      })
                })
                .catch(() => {
                  // on cancel 取消键位
                });
          },



          addWhite(){
              let _this=this;
              if (this.checkPhone()){//true 成功
                let arr ={};
                arr.iccid = _this.iccid;
                arr.addNumber = _this.addWhiteNumber;
                console.log(arr);
                let Pwd_Str = tools.encrypt(JSON.stringify(arr));
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/web/weixin/pac/addWhite", Pwd_Str).then((res) => {
                  let jsonobj = JSON.parse(tools.Decrypt(res.data));
                  console.log(jsonobj)
                  if (jsonobj.Data.status ==0){
                    Notify({ type: 'success', message: '添加成功' });
                    this.show=false;
                    this.getWhiteList()
                  }else{
                    Notify({ type: 'danger', message: jsonobj.Data.message });
                    this.show=false;
                  }
                })


              }else{
                Notify({ type: 'danger', message: _this.s_telephone1 });
              }


          },
          openAdd(){
            this.show=true;
          },

          checkPhone() {
            //定义phone，通过唯一id拿到input框输入的值
            //const phone = document.getElementById('telephone').value;
            const phone = this.addWhiteNumber;
            if (!(/^1[34578]\d{9}$/.test(phone))) {  //手机号正则校验
              if (phone === '') { //若手机号为空
                this.s_telephone1 = "请输入手机号码";
                return false;
              } else { //手机号非空的报错信息
                this.s_telephone1 = "手机号码格式错误";
                return false;
              }
            } else { //手机号正确则无错误信息
              this.s_telephone1 = "";
              return true;
            }

          }
        }
    }
</script>

